<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.machineId"
            style="width: 150px;margin-right:15px;"
            class="filter-item"
            placeholder="请输入机台号"
      ></el-input>
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.machineName"
            style="width: 150px;margin-right:15px;"
            class="filter-item"
            placeholder="请输入机台名称"
      ></el-input>
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.jobNumber"
            style="width: 150px;margin-right:15px;"
            class="filter-item"
            placeholder="绑定人员"
      ></el-input>
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.state"
            style="width: 150px;margin-right:15px;"
            class="filter-item"
            placeholder="设备状态"
      ></el-input>
      <el-select style="margin-right: 15px;width: 150px" clearable filterable v-model="listQuery.department" placeholder="请选择所在部门" @focus="getCenterList" class="filter-item">
          <el-option :value="item" :label="item" v-for="(item,index) in this.centerList.data" :key="index"/>
        </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column label="机台号"  prop="machineId"   align="center"/>
      <el-table-column label="机台名称" prop='machineName' align="center"/>
      <el-table-column label="机台状态" prop='state' align="center"/>
      <el-table-column label="绑定人员姓名" align="center">
        <template slot-scope="scope" >
          {{ `${scope.row.jobNumber?scope.row.jobNumber:''}${scope.row.jobNumber2?','+scope.row.jobNumber2:''}${scope.row.jobNumber3?','+scope.row.jobNumber3:''}${scope.row.jobNumber4?','+scope.row.jobNumber4:''}${scope.row.jobNumber5?','+scope.row.jobNumber5:''}` }}
        </template>
      </el-table-column>
      <el-table-column label="所在部门" prop='department' align="center"/>
      <el-table-column label="开始时间" prop='beginTime' align="center"/>
      <el-table-column label="结束时间" prop="finishTime" align="center"/>
      <!-- 对ECN数据进行编辑与删除操作 -->
      <!-- <el-table-column  label="操作" align="center" v-if="userInfo.roleId == 0 || userInfo.roleId == 1 || userInfo.roleId == 14">
        <template slot-scope="scope" >
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
   
        <!-- 修改ECN信息弹出表单 -->
    <el-dialog title="ECN信息变更" :visible.sync="dialogFormVisible" width="700px">
    <el-form :model="modifyform">
      <el-form-item label="ecn变更ID" :label-width="formLabelWidth">
        <el-input v-model="modifyform.ecnChangeId" style="width:400px" disabled/>
      </el-form-item>
      <el-form-item label="版本" :label-width="formLabelWidth">
        <el-input v-model="modifyform.version" style="width:400px" />
      </el-form-item>
      <el-form-item label="产品名称" :label-width="formLabelWidth">
        <el-input v-model="modifyform.produceName" style="width:400px" />
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="modifyform.ecnDesc" style="width:400px" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="modifyProcess">确 定</el-button>
    </div>
    </el-dialog>


   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
 
  </div>
</template>

<script>
import { finMachineState } from '@/api/machine.js'
import { getCenter } from '../../api/workSection.js'
export default {
      name: 'machine_Status',
      data() {
        return {
          listQuery: {
              page: 1,
              limit: 10,
              machineId: '',                        //机台号
              machineName: '',
              state: ''                       //机台状态
          },
          centerList: {data:[]}, 
          total: '',                                //返回信息总数
          formLabelWidth: '100px',                  //弹框内部组件的宽度设定
          dialogFormVisible: false,                 //变更弹窗显现条件
          modifyform: {                             //ECN变更表单
            ecnChangeId: '',                        //只显示给用户看，input框为disable                   
            version: '',
            produceName: '',
            ecnDesc: ''
          },
          tableInfo: '',                             //table表单内容
          userInfo: this.$store.state.user.userInfo
        }
      },
      methods: {
          // 获取工作中心
      async getCenterList() {
        let query = {}
        const data = await getCenter(query)
        this.centerList = data
      },
        getData(){
          this.listQuery.page = 1
          this.handleFilter()
        },
        // 搜索按钮绑定的函数
        // 获取table表单数据与数据总数
        async handleFilter() {
          let query = Object.assign({},this.listQuery)
          let {data} = await finMachineState(query)
          this.tableInfo = data.list
          this.total = data.count
        },
        //删除ECN一行信息
        handleDelete(index,row) {
        this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let res = await delEcnChange({ecnChangeId: row.ecnChangeId})
          this.tableInfo.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
        this.listQuery.limit = val
        this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        }
      },
        // 进入页面获取table信息
      mounted() {
        this.handleFilter()
      }
}
</script>

<style>

</style>